<template>
  <!-- <h4>{{ person }}</h4> -->
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>薪资toRef:{{ salary }}K</h2>
  <!-- <h2>薪资toRefs:{{ job.j1.salary }}K</h2> -->
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">修改年龄</button>
  <button @click="salary++">toRef涨薪</button>
  <!-- <button @click="job.j1.salary++">toRefs涨薪</button> -->
  <h2>msg2:{{ msg2 }}</h2>
  <h2 @click="change2">ceshi</h2>
</template>

<script>
// toRef: 是将某个对象中的某个值转化为响应式数据，其接收两个参数，第一个参数为 obj 对象；第二个参数为对象中的属性名
// toRefs：与toRef功能一致,但可以批量创建多个ref对象,语法:toRefs(person)

// 重点： 详见https://juejin.cn/post/6897030228867022856
// ref 是对传入数据的拷贝；toRef 是对传入数据的引用
// ref 的值改变会更新视图；toRef 的值改变不会更新视图
import { reactive, toRef, toRefs } from "vue"; // ref处理基本类型数据  reactive处理引用类型数据
export default {
  name: "demo",
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    // const x = toRefs(person)
    // console.log(x) // {age:ObjectRefImpl{}...}

    let msg = { name: "zs", age: 16 };
    let msg2 = toRef(msg, "name");
    console.log("msg2.value==", msg2.value); // zs
    function change2() {
      msg2.value = "ww";
      console.log("msg2.value==", msg2.value); // ww
      console.log("msg==", msg); // {name: "ww", age: 16} msg.ww 数据变了,但是视图上的是不会变的
    }
    // change2();

    return {
      // person,
      name: toRef(person, "name"),
      age: toRef(person, "age"),
      salary: toRef(person.job.j1, "salary"),

      // ...toRefs(person)
      msg2,
      change2,
    };
  },
};
</script>


